<template>
  <div id="down">
      <ul>
            <!--<li @click="change(index)" 
                v-for="(item,index) in lits" :key="index"
                :class='num == index? "active": "" '>
                <a :href=urls[index]>
                    {{item}}
                </a>
            </li>-->
      </ul>
  </div>
</template>
<script>
import router from "../router/index";
export default {
  name: "down",
  data() {
    return {
//    lits: ["商城", "小计", "特殊", "中单", "账户"],
//    urls: ["#/", "#/xiaoji", "#/teshu", "#/zhongdan", "#/user"],
//    num: "0",
//    login: false
    };
  },
  methods: {
    change: function(ins) {
      this.num = ins;
    }
  },
  mounted: function() {
    var hisAdress = "#/" + router.history.current.name;
    switch (hisAdress) {
      case "#/Index":
        this.num = 0;
        break;
      case this.urls[1]:
        this.num = 1;
        break;
      case this.urls[2]:
        this.num = 2;
        break;
      case this.urls[3]:
        this.num = 3;
        break;
      case this.urls[4]:
        this.num = 4;
        break;
    }
  }
};
</script>
<style scoped>
#down {
  box-shadow: 0 0px 5px black;
  overflow: hidden;
  background-color: #99c5e1;
  position: fixed;
  width: 100%;
  bottom: 0;
  padding: 2%;
}
#down ul {
  overflow: hidden;
  width: 100%;
}
#down ul li {
  float: left;
  width: 18%;
  margin: 1%;
  padding: 2% 0;
  box-shadow: 0.4px 0.4px 2px gray inset;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s;
}
#down ul li.active {
  box-shadow: 1px 1px 5px gray;
  background-color: #5ab6f080;
}
a {
  color: #604646;
  padding: 18%;
}
</style>


